<!--检测点列表其中有个弹窗设置型号等-->
<template>
	<view>
		<!-- <button class="btn" @click="showAdd" size="mini" type="primary">+ &nbsp;新增</button> -->
		<Tab @change="changeParam" :tabList="tabList" :activeIndex="activeIndex"></Tab>
		<view class="search-content"> <!-- 搜索框 -->
			<uni-easyinput v-model="keyWord" class="search-box" suffixIcon="search" placeholder="请输入关键字"
				@iconClick="searchTableData"></uni-easyinput>
		</view>
		<!-- <Listscroll requestUrl="/device/prod-api/oil/app/examPointList" :params="params">
			<template #default="scope"> -->
			<view style="height:900rpx;overflow-y: auto;">
				<view class="notice-item" v-for="(item,i) in  listData" :key="i" @click="showDetail(item)">
					<!-- <view class="notice-item__title">
						<view class="title">{{item.title  }}</view>
						<view class="type">{{status[item.auditStatus]}}</view>
					</view> -->
					<view class="notice-item__containter">
						<text class="item-name">编号：</text>
						<text class="item-value">{{item.pointNo}}</text>
					</view>
					<view class="notice-item__containter-row">
						<text class="item-name">区域：</text>
						<text class="item-value">{{item.areaName}}</text>
						<text class="item-name-two">距离：</text>
						<text class="item-value">{{item.distance}}</text>
					</view>
					<view class="notice-item__containter-row">
						<text class="item-name">阈值：</text><text class="item-value">{{item.leakMax}}</text>
						<text class="item-name-two">装置：</text><text class="item-value">{{item.equipmentName}}</text>
					</view>
				</view>
			</view>
			<!-- </template>
		</Listscroll> -->
		<view :hidden="selectFlag" class="popup_content">
			<view class="popup_title">设置</view>
			<view class="popup_textarea_item">
				<!-- <uni-data-select
						v-model="selectedData"
						:localdata="enterpriseList"
					></uni-data-select> -->
				<input v-model="deviceType" :maxlength="100"
					style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;margin-bottom: 20rpx;"
					placeholder="请输入检测设备型号" />
				<input v-model="deviceNo" :maxlength="100"
					style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;margin-bottom: 20rpx;"
					placeholder="请输入检测设备编号" />
				<input v-model="backValue" :maxlength="100"
					style="border:1px solid #ededed;height: 32px;border-radius: 4px;padding-left: 10px;"
					placeholder="请输入环境本底值" />
				<view @click="submitInfoData" class="buttons">
					<text class="popup_button">确定</text>
				</view>
			</view>
		</view>
		<view class="popup_overlay" :hidden="selectFlag" @click="hideDiv()"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue"
	import Tab from '@/components/tabs/tabs2.vue';
	import Listscroll from "@/components/list-scroll/list-scroll.vue"
	import {
		onLoad,
	} from "@dcloudio/uni-app";
	import {
		getClassify
	} from "@/api/user.js"
	import {
		onNavigationBarButtonTap
	} from "@dcloudio/uni-app";
	import {
		examPointList
	} from '@/api/deviceTest.js';
	const taskId = ref("")
	const params = ref({
		taskId: "",
		year:uni.getStorageSync('year')
	})
	const listData = ref([])
	const listData1 = ref([])
	const listData2 = ref([])
	const deviceType = ref('')
	const deviceNo = ref('')
	const backValue = ref('')
	const activeIndex = ref(0)
	const tabList = ref([
		{
			tabName: '未检测',
			tabId: 0,
			id: 0
		},
		{
			tabName: '未上传',
			tabId: 1,
			id: 1
		}
	])
	const selectFlag = ref(true)
    const keyWord = ref('')
	onNavigationBarButtonTap(function(e) {
		//console.log("ffffffff", e.fontSize);
		//console.log("打开弹窗");
		selectFlag.value = false
	})
	onMounted(() => {
		getListData();
	})
	onLoad((option) => {
		if (option) {
			//console.log('option',option)
			//taskId.value = 
			params.value.taskId = option.taskId;
			uni.setStorageSync('taskId',option.taskId);
		}
	});
	const changeParam = (idx)=> {
		console.log('idx-===',idx)
		const item = tabList.value.filter(v=>v.tabId === idx);
		activeIndex.value = item[0].id;
		console.log('activeIndex===', activeIndex.value)
		if( activeIndex.value == 0){
			listData.value = listData1.value
		} else {
			listData.value = listData2.value
		}
		//params.value.auditStatus = idx;
		//查询新数据
	}
	//获取列表数据
	const getListData = () =>{
		//let params = params.value;
		examPointList(params.value).then(res => {
			// uni.showToast({
			// icon: 'none',
			// title: res.message	
			// });
			listData1.value = [...res.data]; 
			if(activeIndex.value == 0){
				listData.value = listData1.value;
			}
			
		})
	}
	const searchTableData = () =>{
		//根据关键字搜索结果
		console.log("keyWord",keyWord);
	}
	const submitInfoData = () =>{
		//填写信息提交，关闭弹窗
		selectFlag.value = true	;
		//console.log("deviceNo",deviceNo.value);
		uni.setStorageSync('deviceNo',deviceNo.value);
		uni.setStorageSync('deviceType',deviceType.value)
		uni.setStorageSync('backValue',backValue.value)
		
	}
	const showDetail = (item) =>{
		console.log("itemitem",item);
		let detailInfo = item;
		uni.navigateTo({
					   url: '/pages/testing/detectionPointDetail?detail='+ encodeURIComponent(JSON.stringify(detailInfo))
					});
	}
</script>

<style lang="scss" scoped>
	.search-content {
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
	}

	.notice-item {
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 10rpx;
		margin: 20rpx 30rpx 0 30rpx;
		padding: 20rpx;
		cursor: pointer;
	}

	.notice-item__title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #455BDF;
		}

		.type {
			display: inline-block;
			padding: 4rpx 8rpx;
			background: #fef0f0;
			border: 2rpx solid #fde2e2;
			color: rgb(251, 69, 59);
			border-radius: 10rpx;
			font-size: 20rpx;

		}
	}

	.notice-item__containter {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: flex;
		-webkit-line-clamp: 2;
		line-clamp: 2;

		//font-size: 28rpx;
		.item-name {
			font-size: 20rpx;
			color: #999;
		}

		.item-value {
			line-height: 1;
		}
	}

	.notice-item__containter-row {
		.item-name {
			font-size: 20rpx;
			color: #999;
		}

		.item-name-two {
			margin-left: 40rpx;
			font-size: 20rpx;
			color: #999;
		}

		.item-value {
			line-height: 1;
		}
	}

	.btn {
		margin: 30rpx 0 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
	}

	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 500rpx;
		height: 500rpx;
		margin-left: -270rpx;
		margin-top: -270rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
	}

	.popup_title {
		width: 480rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.popup_textarea_item {
		padding-top: 5rpx;
		height: 50rpx;
		width: 440rpx;
		background-color: #F1F1F1;
		margin-top: 20rpx;
		margin-left: 20rpx;
		padding-top: 25rpx;
	}

	.popup_textarea {
		width: 410rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.popup_button {
		color: #ffffff;
	}

	.buttons {
		text-align: center;
		font-size: 50rpx;
		margin-top: 50rpx;
		background-color: #455bdf;
		cursor: pointer;
		border-radius: 25px;
	}

	.popup_textarea_item {
		background-color: #ffffff;
	}
	.tabs-container .tabs-item-line{
		width:0 !important
	}
</style>